<template>
  <md-page title="AR寻宝" :backUrl="'/pages/other/match/points/index?active_id=' + data.active_id">
    <view class="container">
      <view class="card">
        <view class="title">{{ data.info?.point_name }}</view>
        <view v-if="data.info?.point_type?.length > 0" class="tags m-bottom-30 m-top-12">
          <view v-for="item in data.info?.point_type" :key="item" :class="['tag', data.tagMap[item]]">
            {{ data.pointType[item] }}
          </view>
        </view>
        <!-- 打卡处理 1：未打卡 2：已打卡成功 -->
        <view class="buji-wrap m-bottom-30" v-if="data.info?.is_check == 2">
          <view class="left-title" :style="{ background: data.configInfo?.select_color_text }">打卡状态</view>
          <view class="content">已打卡</view>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="shadow flex-l">
        <md-button
          v-if="data.info?.is_check != 2"
          class="button flex-1"
          @click="() => bottomBtnClick('ar')"
          title="唤醒AR"
          :color="data.configInfo?.button_color1 || '#d92121'"
          :text-color="data.configInfo?.button_color1_text || '#ffffff'" />
      </view>
      <view class="footer-container tips-footer shadow flex-l">
        <view class="tips-text" @click="handleShowTips">无法正常唤醒AR？</view>
      </view>
      <!-- 提示弹窗 -->
      <md-read-dialog
        ref="tipsDialog"
        title="温馨提示"
        :content="tipsContent"
        :countdown="tipsCountdown"
        tip-template="请仔细阅读，{countdown}秒后可以直接完成本点位打卡"
        ready-text="已阅读完成，可直接打卡"
        confirm-text="确定"
        cancel-text="取消"
        @confirm="handleTipsConfirm"
        @cancel="handleTipsCancel" />
      <!-- <view class="footer-container shadow flex-l">
          <md-button
          v-if="data.info?.is_check != 2"
          class="button flex-1"
          @click="() => bottomBtnClick('collection')"
          title="唤醒合集AR"
          :color="data.configInfo?.button_color1 || '#d92121'"
          :text-color="data.configInfo?.button_color1_text || '#ffffff'" />
      </view> -->
    </view>
  </md-page>
</template>

<script lang="ts" setup>
import { matchScanCodeCheck, arCheckinSkip } from '@/api';
import { PointType } from '@/common/enum';
import { onLoad } from '@dcloudio/uni-app';
import { onUnmounted, reactive, ref } from 'vue';
const data = reactive<any>({
  configInfo: {},
  point_id: '',
  active_id: '',
  pointType: PointType,
  tagMap: {
    '1': 'daka',
    '2': 'zhuti',
    '3': 'buji',
    '4': 'daka',
    '5': 'zhuti',
    '6': 'buji',
    '7': 'daka'
  },
  info: {
    // point_name: '',
    // point_type: [],
    // is_check: 1,
  },
});
const url = ref<string>('');
const tipsDialog = ref<any>(null);
const tipsCountdown = ref(0);
const tipsContent =
  '如果您一直无法正常唤醒AR，可以先升级最新版本的微信后再次尝试。升级后仍然无法正常唤醒，可以点击下方确定直接完成本点位打卡，但是将无法获得点位奖励。是否确定要直接打卡？';
let tipsTimer: ReturnType<typeof setInterval> | null = null;

const startTipsCountdown = () => {
  stopTipsCountdown();
  tipsCountdown.value = 15;
  tipsTimer = setInterval(() => {
    if (tipsCountdown.value > 0) {
      tipsCountdown.value -= 1;
    } else {
      stopTipsCountdown();
    }
  }, 1000);
};

const stopTipsCountdown = () => {
  if (tipsTimer) {
    clearInterval(tipsTimer);
    tipsTimer = null;
  }
};

/**
 * 显示提示弹窗
 */
const handleShowTips = () => {
  startTipsCountdown();
  tipsDialog.value?.open?.();
};

/**
 * 确定按钮点击事件
 */
const handleTipsConfirm = () => {
  if (tipsCountdown.value > 0) return;
  stopTipsCountdown();
  tipsCountdown.value = 0;
  tipsDialog.value?.close?.();
  // 调用打卡跳过接口
  fetchArCheckinSkip();
};

/**
 * 取消按钮点击事件
 */
const handleTipsCancel = () => {
  stopTipsCountdown();
  tipsCountdown.value = 0;
  tipsDialog.value?.close?.();
};

// ar打卡跳过
const fetchArCheckinSkip = async (point_id?: string) => {
  try {
    const res = await arCheckinSkip({
      point_id: point_id || data.point_id,
    });
    console.log(res);
    // data.info = res.data;
    // console.log(res.data);
    uni.showModal({
      title: '提示',
      content: res?.msg || '打卡成功',
      showCancel: false,
      success: res => {
        if (res.confirm) {
          // 刷新函数
          fetchMatchScanCodeCheck(data.point_id);
        }
      },
    });
  } catch (error) {}
};

/**
 * 接口相关
 */
const fetchMatchScanCodeCheck = async (point_id?: string) => {
  try {
    const res = await matchScanCodeCheck({
      point_id: point_id || data.point_id,
    });
    data.info = res.data;
    console.log(res.data);

  } catch (error) {}
};

const bottomBtnClick = (type: string) => {
  if (type === 'collection') {
    // 唤醒合集AR
    uni.redirectTo({
      url: '/pages/ar/ar-collection',
    });
  } else {
    // 唤醒场景AR
    uni.redirectTo({
      url: '/pages/ar/ar-camera?point_id=' + data.point_id,
    });
  }
};

onLoad(option => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
  data.point_id = option?.point_id;
  data.active_id = option?.active_id;
  option?.point_id && fetchMatchScanCodeCheck(option?.point_id);
});

onUnmounted(() => {
  stopTipsCountdown();
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  & > .card {
    padding: 26rpx 30rpx;
    box-sizing: border-box;
    background: white;
    & > .title {
      font-weight: bold;
      font-size: 40rpx;
    }
    & > .tags {
      display: flex;
      align-items: center;
      gap: 20rpx;
      .tag {
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        border-radius: 10rpx;
        padding: 0 18rpx;
        box-sizing: border-box;
        opacity: 0.9;
        color: white;
        &.zhuti {
          background: $primary;
        }
        &.daka {
          background: #eca342;
        }
        &.buji {
          background: #e64627;
        }
        &.ar {
          background: #00aaee;
        }
      }
    }
  }
  .code-wrap {
    display: flex;
    width: 100%;
    height: 460rpx;
    border-radius: 20rpx;
    overflow: hidden;
    & > .left-title {
      font-size: 34rpx;
      font-weight: bold;
      width: 80rpx;
      background: $primary;
      color: white;
      text-align: center;
      padding: 14rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }
    & > .code-content {
      flex: 1;
      background: #f7f7f7;
      .code-image {
        width: 390rpx;
        height: 390rpx;
        background: white;
      }
    }
  }
  .buji-wrap {
    width: 100%;
    background: #f7f7f7;
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    & > .left-title {
      font-size: 34rpx;
      font-weight: bold;
      width: 80rpx;
      background: #1cc0b2;
      color: white;
      text-align: center;
      padding: 14rpx;
      box-sizing: border-box;
      height: 100%;
    }
    & > .content {
      flex: 1;
      font-size: 34rpx;
      font-weight: bold;
      text-align: center;
    }
    & > .code {
      margin: 0 30rpx;
    }
  }
  .tips-text {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    color: $warn;
    padding: 20rpx 0;
    cursor: pointer;
    transition: all 0.2s ease;
    &:active {
      opacity: 0.7;
    }
  }
}

.footer-container {
  width: 100%;
  position: fixed;
  left: 0;
  padding: 0 30rpx;
  box-sizing: border-box;
  z-index: 99;
  &:not(.tips-footer) {
    bottom: 100rpx;
    padding-bottom: $safe-bottom;
  }
  &.tips-footer {
    bottom: 0;
    padding-bottom: calc(20rpx + $safe-bottom);
    z-index: 98;
  }
}

</style>
